<template>
  <div class="info">
    <div id="demo"></div>
  </div>
</template>

<script setup>
import { 影像混合 } from "/public/JS/baselayers.js";
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Graphic from "@arcgis/core/Graphic";
import { onMounted } from "vue";

var map, view;

onMounted(() => {
  map = new Map({
  basemap: {
    baseLayers: 影像混合,
  },
  layers: [],
});
view = new MapView({
  map: map,
  container: "demo",
  background: {
    color: [255, 255, 255],
  },
  spatialReference: { wkid: 3857 },
  center: [106.9, 29.7],
  zoom: 10,
  constraints: {
    rotationEnabled: false,
    maxZoom: 19,
  },
});
view.ui.remove(["zoom", "attribution"]);
})

</script>


<style scoped >
:deep(.tdt-infowindow-content-wrapper, .tdt-infowindow-tip) {
  background-color: transparent;
  box-shadow: none;
}
:deep(.tdt-infowindow-content-wrapper) {
  padding: 0;
}
:deep(.tdt-infowindow-content) {
  margin: 0;
}
:deep(.tdt-infowindow-tip-container) {
  display: none;
}
::v-deep .tdt-bottom {
  display: none;
}
</style>
<style lang="less" scoped>
#demo {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
.info {
  width: 100%;
  height: 100%;
  // border: 1px red solid;
}
</style>
